/* ---------------- 全局样式重置，统一盒模型 ---------------- */
* {
  margin: 0;                 /* 去掉所有元素默认外边距 */
  padding: 0;                /* 去掉所有元素默认内边距 */
  box-sizing: border-box;    /* 设置盒模型为 border-box，方便布局 */
}

/* ---------------- 页面整体布局 ---------------- */
body {
  font-family: "Helvetica Neue", sans-serif; /* 设置全局字体 */
  background-color: #f5f7fa;                 /* 页面浅灰色背景 */
  display: flex;                             /* 使用 flex 布局居中 */
  justify-content: center;                   /* 水平居中 */
  align-items: center;                       /* 垂直居中 */
}

/* ---------------- 登录框容器 ---------------- */
#login-box {
  width: 350px;                             /* 固定宽度 */
  background-color: white;                  /* 白色背景 */
  padding: 30px;                            /* 内边距 */
  border-radius: 8px;                       /* 圆角边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);/* 阴影效果 */
}

/* ---------------- 标题文字 ---------------- */
p {
  text-align: center;   /* 文本居中 */
  color: #333;          /* 深灰色字体 */
  margin-bottom: 25px;  /* 下方外边距 */
  font-weight: 500;     /* 字体加粗 */
}

/* ---------------- 表单左侧标签文字 ---------------- */
.form-label {
  display: inline-block;  /* 让标签独占一行宽度 */
  color: black;           /* 黑色文字 */
  font-size: 14px;        /* 字号 */
  width: 90px;            /* 固定标签宽度 */
  margin-right: 10px;     /* 与输入框间距 */
}

/* ---------------- 输入框样式 ---------------- */
.form-input {
  width: 30%;                    /* 宽度（实际还会被 flex 撑开） */
  padding: 5px 15px;             /* 输入框内边距 */
  border: 1px solid #ddddddd7;   /* 浅灰边框 */
  border-radius: 20px;           /* 圆角 */
  font-size: 10px;               /* 小字号 */
  flex: 1;                       /* 占据剩余空间 */
  padding: 8px 10px;             /* 输入框内部间距（覆盖前一行） */
}

/* ---------------- 必填提示星号 ---------------- */
span {
  color: red;          /* 红色提示 */
  font-size: 10px;     /* 小字号 */
  margin-left: 5px;    /* 与文字保持间距 */
}

/* ---------------- 每行表单项容器 ---------------- */
#login-box div {
  display: flex;           /* 水平排列：标签 + 输入框 */
  align-items: center;     /* 垂直居中对齐 */
  margin-bottom: 15px;     /* 下间距 */
}

/* ---------------- 验证码画布 ---------------- */
#captchaCanvas {
  margin-left: 1px;        /* 左边距 */
  border: 1px solid #ccc;  /* 灰色边框 */
  cursor: pointer;         /* 鼠标悬停时变成手型 */
}

/* ---------------- 性别单选按钮 ---------------- */
.sex-radio {
  margin-left: 20px;  /* 单选按钮之间的间距 */
  margin-right: 5px;  /* 按钮与文字间距 */
}

/* ---------------- 兴趣爱好复选框 ---------------- */
.like-option {
  margin-right: 10px; /* 每个选项之间的间距 */
}

.like-option input {
  margin-right: 1px;  /* 复选框与文字间距 */
}

/*------------------ 上传图片表单相关样式 ----------------*/

/* 上传表单整体容器：右侧区域垂直排列 */
#uploadForm {
  flex: 1;                  /* 占满右边区域 */
  display: flex;             /* 使用 flex */
  flex-direction: column;    /* 垂直排列（输入框 + 按钮） */
  gap: 10px;                 /* 内部控件间距 */
}

/* 文件选择框样式，复用输入框风格 */
#uploadForm .form-input {
  width: 100%;             /* 占满右边 */
  border-radius: 25px;      /* 圆角更大 */
  font-size: 12px;         /* 字号稍大 */
  cursor: pointer;          /* 鼠标手型 */
}

/* 上传/重置按钮通用样式 */
#uploadForm button {
  padding: 6px 16px;                 /* 内边距 */
  border: none;                      /* 去掉边框 */
  border-radius: 20px;               /* 圆角 */
  cursor: pointer;                   /* 鼠标手型 */
  font-size: 12px;                   /* 字号 */
  transition: background-color 0.3s ease; /* 背景渐变效果 */
}

/* 上传按钮：蓝色 */
#uploadForm button[type="submit"] {
  background-color: #4c84af; /* 蓝色背景 */
  color: white;              /* 白色字体 */
}
#uploadForm button[type="submit"]:hover {
  background-color: #4c84af; /* 悬停保持蓝色 */
}

/* 重置按钮：红色 */
#uploadForm button[type="button"] {
  background-color: #f44336; /* 红色背景 */
  color: white;              /* 白色字体 */
}
#uploadForm button[type="button"]:hover {
  background-color: #d32f2f; /* 悬停深红 */
}

/* ---------------- 上传预览区域 ---------------- */
#preview {
  display: flex;             /* 水平排列：左边文件信息 + 右边图片 */
  align-items: flex-start;   /* 顶部对齐 */
  margin-top: 10px;          /* 上间距 */
}

/* 右侧预览框 */
.preview-box {
  flex: 1;               /* 占满剩余空间 */
  text-align: center;    /* 内容居中 */
}

/* 预览图片 */
#previewImage {
  max-width: 150px;       /* 限制最大宽度 */
  max-height: 150px;      /* 限制最大高度 */
  display: none;          /* 默认隐藏，上传后显示 */
  border-radius: 8px;     /* 圆角 */
  padding: 5px;           /* 内边距 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 阴影 */
  margin-top: 5px;        /* 上边距 */
}

/* 暂无图片提示文字 */
#noImage {
  font-size: 12px;  /* 小字号 */
  color: #999;      /* 灰色字体 */
  margin-top: 10px; /* 上间距 */
}

/* 上传状态提示 */
#status {
  text-align: center; /* 居中 */
  font-size: 13px;    /* 字号 */
  margin-top: 8px;    /* 上间距 */
}
#status span {
  font-weight: 500;   /* 半粗体 */
}

/*------------------ 表单提交/重置按钮样式 ----------------*/

/* 按钮容器：横向排列并居中 */
.btn-group {
  display: flex;             /* 横向排列 */
  justify-content: center;   /* 居中 */
  gap: 15px;                 /* 按钮之间间距 */
  margin-top: 20px;          /* 上间距 */
}

/* 通用按钮外层容器 */
.submit-btn {
  display: flex;             /* 使用 flex */
  justify-content: center;   /* 水平居中 */
  align-items: center;       /* 垂直居中 */
  gap: 15px;                 /* 按钮间距 */
  margin-top: 20px;          /* 上间距 */
  width: 100%;               /* 占满父容器宽度 */
}

/* 按钮通用样式 */
.submit-btn input[type="submit"],
.submit-btn input[type="reset"] {
  padding: 8px 20px;         /* 内边距 */
  border: none;              /* 无边框 */
  border-radius: 20px;       /* 圆角 */
  font-size: 14px;           /* 字号 */
  transition: background-color 0.3s ease; /* 背景渐变 */
  color: white;              /* 白色字体 */
}

/* 提交按钮绿色 */
.submit-btn input[type="submit"] {
  background-color: #4caf50;
}
.submit-btn input[type="submit"]:hover {
  background-color: #45a049;
}

/* 重置按钮红色 */
.submit-btn input[type="reset"] {
  background-color: #f44336;
}
.submit-btn input[type="reset"]:hover {
  background-color: #d32f2f;
}
